/**
 * Created by zhulizhe on 2017/8/24.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Constant from "../Contant";
import RequestUtil from "../util/NetUtil";
import ImagePicker from 'react-native-image-picker';
import {observer} from "mobx-react";
import {observable} from 'mobx'
import {Loading, EasyLoading} from 'react-native-easy-loading';
import Toast from "react-native-easy-toast";
import meInfoStore from '../../luojs/store/MeInfoStore'

export const Item =({title,children,onClick,hiddenArrow=false})=>{
    return <TouchableOpacity
        activeOpacity={0.9}
        onPress={onClick}
        style={[{
            justifyContent:'space-between',
            alignItems:'center',
            flexDirection:'row',
            backgroundColor:'white',paddingHorizontal:10,paddingVertical:15},styles.borderBottom]}>
        <View>
            <Text style={{color:Constant.TEXT_COLOR_3,fontSize:14}}>{title}</Text>
        </View>
        <View style={{justifyContent:'space-between',flexDirection:'row',alignItems:'center'}}>
            <View style={{paddingHorizontal:10}}>{children}</View>
            <Ionicons name="ios-arrow-forward-outline" size={20} color={hiddenArrow?Constant.TEXT_COLOR_F8:'gray'}/>
        </View>
    </TouchableOpacity>
}


@observer
export default class PersonInfo extends Component{

    @observable head_img = '';
    @observable head_clicked=false;
    static navigationOptions = {
        title: '用户信息',
        headerTitleStyle:{alignSelf:'center'}
    };

    // 头像上传
    uploadAvatar(filePath){
        EasyLoading.show('正在上传中');
        RequestUtil.uploadImage([filePath],(resp)=>{
            EasyLoading.dismis();
            LOG('images++++++++'+JSON.stringify(filePath)+'--------resp-------'+JSON.stringify(resp));
            if(resp!=null){
                if(resp.status && resp.status==500){
                    this.refs.toast.show('图片太大了！');
                }
                else if(resp.ret_msg=='上传成功') {
                    this.head_img = resp.head_img||'' ;
                    meInfoStore.setUserIcon(resp.head_img)
                    RequestUtil.requestData('user/icon',{
                        userIconUrl:resp.head_img
                    }).then(resp=>{
                        LOG('上传结果---------'+JSON.stringify(resp));
                    })
                }
            }

        })
    }

    componentDidMount(){
        let {userInfo} = this.props.navigation.state.params ;
        this.head_img = userInfo.userIconUrl ;
    }

    render(){
        let {userInfo} = this.props.navigation.state.params ;

        let formatedPhoneNum = userInfo.phoneNum||'';
        if(formatedPhoneNum.length>=11){
            formatedPhoneNum =formatedPhoneNum.substr(0,3) + '****' + formatedPhoneNum.substr(7) ;
        }
        return <View style={{flex:1,backgroundColor:Constant.GRAYBGCOLOR}}>
            <Item
                onClick={()=>{
                    if(this.head_clicked)return;
                    this.head_clicked=true;
                    const options = {
                        title: '选择图片',
                        cancelButtonTitle: '取消',
                        chooseFromLibraryButtonTitle: '相册选取',
                        takePhotoButtonTitle: '拍照',
                        storageOptions: {
                            skipBackup: true,
                            path: 'images'
                        },
                        quality: 0.5
                    };
                    ImagePicker.showImagePicker(options, response => {
                         LOG('ImagePicker',JSON.stringify(response));
                        this.head_clicked=false;
                        if(response.data!=null){
                            let source = {uri: response.uri};
                            this.uploadAvatar(source);
                        }
                    })
                }}
                title="头像"
                children={<Image style={{width:60,height:60,borderRadius:4}} source={{uri:this.head_img}}/>}
            />
            <Item
                title="名字"
                children={<Text style={{color:'gray'}}>{meInfoStore.userName}</Text>}
                onClick={()=>{this.props.navigation.navigate('SetNickName')}}
            />
            <Item
                title="手机号"
                children={<Text style={{fontWeight:'100'}}>{formatedPhoneNum}</Text>}
                hiddenArrow={true}
            />
            <View style={{marginTop:20}}>
                <Item
                    title="送货地址"
                    children={<Text style={{fontWeight:'100'}}>{}</Text>}
                    onClick={()=>{this.props.navigation.navigate('AddressList')}}
                />
            </View>
            <Loading/>
            <Toast
                ref="toast"
                position='top'
                positionValue={200}
                fadeInDuration={750}
                fadeOutDuration={1000}
                opacity={0.8}
            />
        </View>
    }
}

const styles = {
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}